<template>
<div class="header container">
    <div class="header-left fl" v-if="account== null">
        <p @click="clicklogin">欢迎来到新华社印刷，请登录</p>
        <p class="border"></p>
        <p @click="rigest">免费注册</p>
    </div>
    <div class="header-login fl" v-else>
        <p>H,***欢迎来到新华印务！</p>
        <p>[注销]</p>
    </div>
    <div class="header-right fr">
        <ul>
             <li><img src="../assets/location.png" alt=""> 北京</li>
           <li> 商城首页</li>
           <li> 我的订单</li>
           <li> 客服中心</li>
        </ul>
    </div>

    <div class="header-comprehensive fl">
        <!-- 搜索栏 logo -->
        <div class="comprehensive-top ">
            <div class="logo">
                <img src="../assets/logo.png" alt="">
            </div>
                <div class="search-recomme clearfix">
                    <div class="search">
                        <input type="text" placeholder="请输入要搜索的信息" class="txt fl">
                        <span class="btn">搜索</span>
                    </div>
                    <div>
                        <ul class="recomme">
                            <li v-for="(item,i) in recommend" :key="i" class="fl">{{item}}</li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    
    data() {
        return {
            recommend: ['显示器', '特种纸', '手持VOC检测仪', '纸品会', '新华社自营'],
            account: null, //登录切换条件
        }
    },
    methods: {
        // 跳转注册
        rigest() {
            this.$router.push({name:'register'})
        },
        // 跳转登录
        clicklogin() {
            this.$router.push({name:'login'})
        }
    },
}
</script>

<style lang="less">
.header {
    height: 100%;

    .header-left {
        display: flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: -moz-flex;
        align-items: center;
        cursor: pointer;

        :nth-child(3) {
            color: #D92410;
        }

        p {
            line-height: 38px;
            color: #666;
        }
    }

    .border {
        width: 1px;
        height: 18px;
        background-color: #DBDBDB;
        margin: 0 15px;
    }

    .header-login {
        display: flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: -moz-flex;
        line-height: 38px;

        :nth-child(2) {
            color: #D92410;
            cursor: pointer;
        }
    }

    .header-right {
        ul {
            display: flex;
            display: -webkit-flex;
            display: -ms-flex;
            display: -moz-flex;
            line-height: 38px;
        }

        li {
            margin: 0 15px;
           cursor: pointer;
            a {
                color: #666;

                img {
                    width: 11px;
                    height: 14px;
                    vertical-align: middle;
                    margin-right: 5px;
                }
            }
        }
    }

    // logo   搜索
    .header-comprehensive {
        padding: 38px 0;
        width: 100%;
        box-sizing: border-box;
        .comprehensive-top {
            display: flex;
            display: -webkit-flex;
            display: -ms-flex;
            display: -moz-flex;

            .search-recomme {
                margin-left: 60px;

                .search {
                    width: 760px;
                    height: 38px;
                    border: 1px solid #D92410;
                    border-radius: 100px;

                    .txt {
                        width: 620px;
                        height: 100%;
                        border: none;
                        outline: none;
                        margin-left: 20px;

                    }

                    .btn {
                        display: inline-block;
                        width: 118px;
                        height: 100%;
                        line-height: 38px;
                        text-align: center;
                        background-color: #D92410;
                        border-radius: 0 100px 100px 0;
                        color: #fff;
                        font-size: 16px;
                        font-family: PingFangSC-Semibold;
                        cursor: pointer;
                    }
                }

                .recomme {
                    padding-top: 10px;

                    li {
                        font-size: 12px;
                        color: #666;
                        margin-left: 20px;
                        cursor: pointer;

                        a {
                            float: left;
                        }

                    }
                }
            }
        }
    }
}
</style>
